<template>
  <div id="confrencing-list">
    <template v-if="roomLoaded">
      <div class="toolbar">
         <span>已创建会议数：({{myJoinRoom.length}})</span>
        </div>
      <template v-for="(item,index) in myJoinRoom">
        <ConfrencingListCard :room="item" :key="index" :type="cardtype"></ConfrencingListCard>
      </template>
    </template>
  </div>
</template>

<script>
import ConfrencingListCard from "./ConfrencingListCard.vue";

export default {
  name:'CreatedConfrencingList',
  components: { ConfrencingListCard },
  data() {
    return {
      myJoinRoom: [], // 我参加的会议列表
      roomLoaded: true, // flag 房间加载是否完成 true:完成
      roomloading: false, // flag 房间加载过程动画 true:开启
      roomcount: 0, // 会议室个数
      cardtype: "我创建的" // 传入card 两种情况 “我参与的” “我创建的”
    };
  },
  created() {
    this.roomLoaded = false; //控制视图显示，数据加载完成后置为true。
    this.createdRoom(); // 加载我参加的会议列表
  },
  mounted() {},
  methods: {
    // 获取我创建的会议列表
    createdRoom() {
      this.roomcount = 0;
      this.$http.get("/creatMeetingRoom/getRoom").then(res => {
        console.log("/insertMeetingRoom/getRoom", res);
        let { status, data } = res;
        if (status == 200 && data !== null) {
          this.myJoinRoom = data;
          this.myJoinRoom.forEach(v => {
            this.getMeetingPeaples(v);
          });
          // this.roomloading = false;
        }
      });
    },
    // 获取与会人员（已经被邀请的员工 isJoin==0）
    getMeetingPeaples(room) {
      room.peapleList = [];
      this.$http
        .get("/insertMeetingRoom/accept_users?roomId=" + room.roomId)
        .then(res => {
          console.log("getMeetingPeaples", room.roomId);
          console.log("getMeetingPeaples", res);
          let { data, status } = res;
          if (status == 200 && data != null) {
            data.forEach(item => {
              if (item.isJoin == 0) {
                room.peapleList.push({
                  realName: item.realName,
                  isAdministrators: item.isAdministrators,
                  userEmail: item.userEmail,
                  id: item.id,
                  headImg: item.headImg,
                  company: item.companyName,
                  department: item.departmentName,
                  job: item.positionName
                });
              }
            });
            this.roomcount++;
            // 确定数据加载完成
            if (this.roomcount == this.myJoinRoom.length) {
              console.log(this.roomcount);
              console.log(this.myJoinRoom);
              this.roomLoaded = true;
            }
          }
        });
    }
  }
};
</script>
<style scoped lang="scss">
@import "scss_vars";
#confrencing-list {
  cursor: default;
  flex: 1;
  background: white;
  padding: 0;
  .toolbar{
    width:100%;
    height: 58px;
    background: $main-bg;
    line-height: 58px;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(102,102,102,1);
    span{
      margin-left:20px;
    }
  }
}
</style>